<template>
    <h2>属性配置</h2>
    <div v-if="currentComponent" class="panel-content">
      <el-tabs v-model="activeTabModel" class="property-tabs">
        <el-tab-pane label="预览设置" name="preview">
          <preview-settings
            v-model:preview-count="previewCountModel"
            v-model:preview-layout="previewLayoutModel"
          />
        </el-tab-pane>
        
        <el-tab-pane label="属性" name="props">
          <props-config
            :component="currentComponent"
            v-model:component-props="componentPropsModel"
            :get-property-editor="getPropertyEditor"
          />
        </el-tab-pane>
        
        <el-tab-pane label="事件" name="events">
          <events-config
            :component="currentComponent"
            v-model:component-events="componentEventsModel"
            @handle-event="handleEvent"
          />
        </el-tab-pane>
        
        <el-tab-pane label="插槽" name="slots" v-if="hasSlots">
          <slots-config
            :component="currentComponent"
            v-model:component-slots="componentSlotsModel"
            :get-property-editor="getPropertyEditor"
          />
        </el-tab-pane>
        
        <el-tab-pane label="子组件" name="children" v-if="hasChildComponents">
          <children-config
            :component="currentComponent"
            :available-slot-components="availableSlotComponents"
            @add-child="addChildComponent"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-empty 
      v-else
      description="请从左侧选择一个组件"
    />
</template>

<script>
import { defineComponent, computed } from 'vue'
import PreviewSettings from './property-panel/PreviewSettings.vue'
import PropsConfig from './property-panel/PropsConfig.vue'
import EventsConfig from './property-panel/EventsConfig.vue'
import SlotsConfig from './property-panel/SlotsConfig.vue'
import ChildrenConfig from './property-panel/ChildrenConfig.vue'

export default defineComponent({
  name: 'PropertyPanel',
  components: {
    PreviewSettings,
    PropsConfig,
    EventsConfig,
    SlotsConfig,
    ChildrenConfig
  },
  props: {
    currentComponent: {
      type: Object,
      default: null
    },
    componentProps: {
      type: Object,
      default: () => ({})
    },
    componentEvents: {
      type: Object,
      default: () => ({})
    },
    componentSlots: {
      type: Object,
      default: () => ({})
    },
    componentChildren: {
      type: Object,
      default: () => ({})
    },
    previewCount: {
      type: Number,
      default: 1
    },
    previewLayout: {
      type: Object,
      required: true
    },
    availableSlotComponents: {
      type: Array,
      default: () => []
    },
    activeTab: {
      type: String,
      default: 'props'
    }
  },
  emits: [
    'update:componentProps',
    'update:componentEvents',
    'update:componentSlots',
    'update:componentChildren',
    'update:previewCount',
    'update:previewLayout',
    'update:activeTab'
  ],
  setup(props, { emit }) {
    // 使用计算属性创建双向绑定
    const componentPropsModel = computed({
      get: () => props.componentProps,
      set: (value) => emit('update:componentProps', value)
    })
    
    const componentEventsModel = computed({
      get: () => props.componentEvents,
      set: (value) => emit('update:componentEvents', value)
    })
    
    const componentSlotsModel = computed({
      get: () => props.componentSlots,
      set: (value) => emit('update:componentSlots', value)
    })
    
    const componentChildrenModel = computed({
      get: () => props.componentChildren,
      set: (value) => emit('update:componentChildren', value)
    })
    
    const previewCountModel = computed({
      get: () => props.previewCount,
      set: (value) => emit('update:previewCount', value)
    })
    
    const previewLayoutModel = computed({
      get: () => props.previewLayout,
      set: (value) => emit('update:previewLayout', value)
    })
    
    const activeTabModel = computed({
      get: () => props.activeTab,
      set: (value) => emit('update:activeTab', value)
    })
    
    // 判断是否有插槽
    const hasSlots = computed(() => {
      return props.currentComponent && 
             props.currentComponent.slots && 
             Object.keys(props.currentComponent.slots).length > 0
    })
    
    // 判断是否有子组件
    const hasChildComponents = computed(() => {
      return props.currentComponent && 
             props.currentComponent.childComponents && 
             props.currentComponent.childComponents.length > 0
    })
    
    // 处理事件触发
    const handleEvent = (eventName) => {
      console.log(`Event triggered: ${eventName}`)
      // 这里可以添加事件处理逻辑
    }
    
    // 获取属性编辑器组件
    const getPropertyEditor = (type, propConfig = {}) => {
      const editorMap = {
        'input': 'el-input',
        'textarea': 'el-input',
        'number': 'el-input-number',
        'select': 'el-select',
        'switch': 'el-switch',
        'boolean': 'el-switch',
        'color': 'el-color-picker',
        'slider': 'el-slider',
        'icon-select': 'el-select'
      }
      
      // 优先使用propConfig中指定的编辑器组件
      if (propConfig.editorProps?.component) {
        return propConfig.editorProps.component
      }
      
      return editorMap[type] || 'el-input'
    }

    // 获取编辑器组件的props
    const getEditorProps = (type, propConfig = {}) => {
      const baseProps = {}
      
      // 处理boolean类型的特殊属性
      if (type === 'boolean' || type === 'switch') {
        baseProps.activeValue = true
        baseProps.inactiveValue = false
      }
      
      // 合并propConfig中的editorProps
      if (propConfig.editorProps) {
        Object.assign(baseProps, propConfig.editorProps)
      }
      
      return baseProps
    }
    
    // 添加子组件
    const addChildComponent = (childName) => {
      if (!props.currentComponent) return null
      
      const childComp = props.currentComponent.childComponents.find(c => c.name === childName)
      if (!childComp) return null
      
      // 创建新的子组件实例
      const newChild = {
        name: childComp.name,
        props: {},
        slots: {}
      }
      
      // 初始化属性
      if (childComp.props) {
        Object.entries(childComp.props).forEach(([key, prop]) => {
          newChild.props[key] = prop.default !== undefined ? prop.default : ''
        })
      }
      
      // 初始化插槽
      if (childComp.slots) {
        Object.entries(childComp.slots).forEach(([key, slot]) => {
          newChild.slots[key] = {
            content: slot.default || '',
            isComponent: slot.isComponent || false,
            props: {}
          }
          
          if (slot.propsConfig) {
            Object.entries(slot.propsConfig).forEach(([propKey, propConfig]) => {
              newChild.slots[key].props[propKey] = propConfig.default !== undefined ? propConfig.default : ''
            })
          }
        })
      }
      
      return newChild
    }

    return {
      componentPropsModel,
      componentEventsModel,
      componentSlotsModel,
      componentChildrenModel,
      previewCountModel,
      previewLayoutModel,
      activeTabModel,
      hasSlots,
      hasChildComponents,
      handleEvent,
      getPropertyEditor,
      getEditorProps,
      addChildComponent
    }
  }
});
</script>

<style scoped>
h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.panel-content {
  height: calc(100% - 50px);
  padding: 0 8px;
  box-sizing: border-box;
}

.property-tabs {
  height: 100%;
}

:deep(.el-tabs__content) {
  overflow-y: auto;
  height: calc(100% - 40px);
  padding: 8px 0;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-collapse-item__content) {
  padding: 0 8px;
}
</style>